<!DOCTYPE html>
<html lang="en" style='height:100%;'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全部课程</title>
    <link rel="stylesheet" href="../css/default.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <script src='../js/jquery-3.2.1.min.js'></script>
</head>
<body style='height:100%;'>
    <!-- 头部 -->
    <div class='header'>
        <header class='s-header'>
            <div class='s-header-logo'>
                <a href="../index.html">
                    <img src="./assets/image/topLogo.png" onerror="error(this,'../assets/image/topLogo.png')" alt="logo" width="100%">
                </a>
            </div>
            <div class='m-header-menu'>
                <div class='m-menu color-#999'>
                    <ul>
                        <li><a href='../index.html'>首页</a></li>
                        <li><a href='courses-list.html'>全部课程</a></li>
                        <li><a href='about-us.html'>关于我们</a></li>
                    </ul>
                </div>
            </div>
            <div class='s-header-user'>
                <div class='s-logined'>
                    <p class='s-search-font-color s-logined-menu pointer'>
                        <span class='iconfont icon-yonghu'></span><span class='s-logined-user'>admin</span>
                        <div class='s-logined-menu-item pointer'>
                            <span class='top-jiao'></span>
                            <p><a href='setting.html'>个人设置</a></p>
                            <p><a href='login.html'>退出</a></p>
                        </div>
                    </p>
                </div>
            </div>
        </header>
        <script>
            ;(function(){
                function error(e,url){
                    e.src=url;
                }
                var show=false;
                $('.s-logined-menu').on('click',function(){
                    show=!show;
                    if(show){
                        $('.s-logined-menu-item').show();
                    }else{
                        $('.s-logined-menu-item').hide();
                    }
                })
            })()
        </script>
    </div>
    <!-- 主体 -->
    <div class='cantainer'>
        <div class='courses-banner'>
            <!-- <img src="../assets/image/banner2.png" alt="img"> -->
        </div>
        <p class='tab-all-courses'><span class='iconfont icon-caidan s-search-font-color caidan'></span><span>全部课程</span></p>
        <div class='courses-tab-panel'>
            <div class='courses-tab-item'>
                <span class='label-courses'>所有分类：</span>
                <p class='inline'>
                    <span>运维人员 > </span>
                    <span>Linux ></span>
                    <span>Linux基础</span>
                </p>
            </div>
            <div class='courses-tab-item'>
                <span class='label-courses'>分类：</span>
                <p class='inline item'>
                    <span>全部</span>
                    <span>运维人员  </span>
                    <span>Linux </span>
                    <span>Linux基础</span>
                    <span>全部</span>
                    <span>运维人员  </span>
                    <span>Linux </span>
                    <span>Linux基础</span>
                    <span>全部</span>
                    <span>运维人员  </span>
                    <span>Linux </span>
                    <span>Linux基础</span>
                    <span>全部</span>
                    <span>运维人员  </span>
                    <span>Linux </span>
                    <span>Linux基础</span>
                    <span>全部</span>
                    <span>运维人员  </span>
                    <span>Linux </span>
                    <span>Linux基础</span><span>全部</span>
                    <span>运维人员  </span>
                    <span>Linux </span>
                    <span>Linux基础</span>
                </p>
            </div>
            <div class='courses-tab-item no-border'>
                <span class='label-courses'></span>
                <p class='inline item'>
                    <span>全部</span>
                    <span>Linux</span>
                    <span>Linux基础</span>
                </p>
            </div>
        </div>

        <div class='tabs-courses clearFiex'>
            <div class='tabs-courses-item nomarginleft'>
                <div class='tabs-image'>
                    <img src="../assets/image/tab4.png" alt="jpg" width="100%">
                    <div class='tabs-detail'>
                        <span class='jiantou-r'>></span>
                        <p>安全运维</p>
                        <p class='en'>Security operation</p>
                    </div>
                </div>
            </div>
            <div class='tabs-courses-item'>
                <div class='tabs-image'>
                    <img src="../assets/image/tab3.png" alt="jpg" width="100%">
                    <div class='tabs-detail'>
                        <span class='jiantou-r'>></span>
                        <p>WEB安全</p>
                        <p class='en'>Web security</p>
                        
                    </div>
                </div>
            </div>
            <div class='tabs-courses-item'>
                <div class='tabs-image'>
                    <img src="../assets/image/tab2.png" alt="jpg" width="100%">
                    <div class='tabs-detail'>
                        <span class='jiantou-r'>></span>
                        <p>渗透测试</p>
                        <p class='en'>Penetration test</p>
                    </div>
                </div>
            </div>
            <div class='tabs-courses-item'>
                <div class='tabs-image'>
                    <img src="../assets/image/tab1.png" alt="jpg" width="100%">
                    <div class='tabs-detail'>
                        <span class='jiantou-r'>></span>
                        <p>软件逆向</p>
                        <p class='en'>Software reverse</p>
                    </div>
                </div>
            </div>
            <div class='tabs-courses-item nomarginleft'>
                <div class='tabs-image'>
                    <img src="../assets/image/tab1.png" alt="jpg" width="100%">
                    <div class='tabs-detail'>
                        <span class='jiantou-r'>></span>
                        <p>软件逆向</p>
                        <p class='en'>Software reverse</p>
                    </div>
                </div>
            </div>
            <div class='tabs-courses-item'>
                <div class='tabs-image'>
                    <img src="../assets/image/tab1.png" alt="jpg" width="100%">
                    <div class='tabs-detail'>
                        <span class='jiantou-r'>></span>
                        <p>软件逆向</p>
                        <p class='en'>Software reverse</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- style='position:absolute;bottom:0;left:0;width:100%;' -->
    <div class='footer'>
        <div class='foot footer-background'>
            <div class='footer-main'>
                <div class='footer-left'>
                    <!-- 左边logo和 关于我们 等 -->
                    <div class='footer-logo'>
                        <img src="./assets/image/foot-logo.png" onerror="error(this,'../assets/image/foot-logo.png')" alt="logo" width="100%">
                    </div>
                    <div class='footer-about footer-font-color'>
                        <p class='about-us'>
                            <span><a href='../template/about-us.html'>关于我们</a></span>
                            <b class='footer-font-background'></b>
                            <span class='conect-us pointer'>联系我们</span>
                            <b class='footer-font-background'></b>
                            <span><a href='http://www.baidu.com'>隐私声明</a></span>
                            <b class='footer-font-background'></b>
                            <span><a href='http://www.baidu.com'>法律公告</a></span>
                        </p>
                        <p class='footer-service'>
                            <span>客服电话：400888888</span>
                            <span>邮箱：bingjiakeji@bingj.com</span>
                        </p>
                    </div>
                    <div class='other-router footer-font-color'>
                        <span>友情链接：</span>
                        <span><a href='http://www.baidu.com'>各大网站链接</a></span>
                        <span><a href='http://www.baidu.com'>各大网站链接</a></span>
                        <span><a href='http://www.baidu.com'>各大网站链接</a></span>
                    </div>
                </div>
                <div class='footer-right'>
                    <!-- 右边的二维码 -->
                    <div class='footer-code'>
                        <img src="./assets/image/code.png" onerror="error(this,'../assets/image/code.png')" alt="code" width="70%">
                    </div>
                    <p class='footer-font-color us'>关注我们</p>
                </div>
            </div>
            <div class='copy-right'>
                <span class='footer-font-color'>Copyright@</span>
                <span class='company'>2017 Tedu.cn All Right Reserved</span>
            </div>
        </div>
        <script>
            function error(e,url){
                e.src=url;
            }
            $('.conect-us').click(function(){
                alert('请拨打电话：400888888')
            })
        </script>
    </div>
    <!-- 底部 -->
    <script src='../js/jquery-3.2.1.min.js'></script>
    <!-- <script src='../js/index.js'></script> -->
    <script>
        // $('.header').load('./public/header-menu.html');
        // $('.footer').load('./public/footer.html',null,function(){
            $('.cantainer').css('padding-bottom',$('.footer').css('height'));
        // });
        $('.tabs-courses-item').on('click',function(){
            window.location.href='courses-detail.html';
        })
    </script>
</body>
</html>